<template>
    <div>

      <el-form size="small" :model="registerForm" :rules="registerRules" label-width="100px">
        <el-form-item label="用户名：" prop="name" style="color: white">
          <el-input auto-complete="off" placeholder="请输入用户名" v-model="registerForm.name"></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="pwd">
          <el-input auto-complete="off" placeholder="请输入密码"  type="password" v-model="registerForm.pwd"></el-input>
        </el-form-item>
        <el-form-item label="确认密码：" prop="pwd_temp">
          <el-input auto-complete="off" placeholder="请再次输入密码" type="password" v-model="registerForm.pwd_temp"></el-input>
        </el-form-item>
        <el-form-item label="邮箱：" prop="email">
        <el-input auto-complete="off" placeholder="请输入邮箱" v-model="registerForm.email"></el-input>
      </el-form-item>
        <el-form-item label="验证码：" prop="verificationCode">
        <el-input auto-complete="off" placeholder="请输入验证码" v-model="registerForm.verificationCode"></el-input>
      </el-form-item>
          <ul class="register_tab">
            <li>
              <el-button size="medium" type="primary" @click="getVertifyCode">{{vertifyCodeMessage}}</el-button>
            </li>
            <li>
              <el-button size="medium" class="login-submit" @click="toAdministrator">注册</el-button>
            </li>
          </ul>
      </el-form>
    </div>
</template>

<script>
  import { GetVertifyCode,RegisterUse,GetLogin} from "../../api/login";
  import {
    getRole,
    removeAccessToken,
    removeRole,
    setAccessToken,
    setRole,
    setuserName
  } from "../../utils/cacheProcessing"
  import jwtDecode  from 'jwt-decode'
    export default {
        name: "registerUsers",
      data(){
        var checkpwdTemp = (rule, value, callback) => {
          console.log("密码："+this.registerForm.pwd);
          console.log("确认密码："+value);
          console.log(this.registerForm.pwd === value);

          if(value !==this.registerForm.pwd){
            return callback(new Error("密码输入不正确"));
          }
        }
        var checkMailbox = (rule, value, callback) => {
          let reg = /[a-z | A-Z | 0-9 | _]+ @ [a-z | A-Z | 0-9]+ \. com/
          if(!reg.test(value)){
            return callback(new Error("邮箱格式不正确"));
          }
        }
          return{
            verificationCode:"",
            vertifyCodeMessage:"获取验证码",
            registerForm:{
              name:"2018081043",
              pwd:"123456",
              pwd_temp:"123456",
              email:"980950225@qq.com",
              verificationCode:"",
            },
            registerRules:{
              name:[
                { required: true, message: "请输入姓名", trigger: "blur" },
              ],
              pwd:[
                { required: true, message: "请输入密码", trigger: "blur" },
                { min: 6, message: "密码长度最少为6位", trigger: "blur" }
              ],
              pwd_temp:[
                { required: true, message: "请输入确认密码", trigger: "blur" },
                { validator: checkpwdTemp, trigger: "blur" }
              ],
              email:[
                { required: true, message: "请输入邮箱", trigger: "blur" },
             //   { validator: checkMailbox, trigger: "blur" }
              ],
              verificationCode:[
                { required: true, message: "请输入验证码", trigger: "blur" },
              ]
            }
        }
      },
      methods:{
        toAdministrator(){

          let requestData = {
            username:this.registerForm.name,
            password:this.registerForm.pwd_temp,
            email:this.registerForm.email,
            rememberMe:0,
            role:1
          }
          RegisterUse(requestData).then(res=>{
            this.$messageOK("success", "注册成功！");
            GetLogin(requestData).then(res => {
              //     console.log(res.headers.token);
              setAccessToken(res.headers.token);
              setRole(jwtDecode(res.headers.token).rol);
              if(getRole()==="ROLE_USER"){
                this.$router.push("/user");
              }
              else if(getRole()==="ROLE_ADMIN"){
                this.$router.push("/administrator");
              }else if(getRole()==="ROLE_SUPERADMIN"){
                this.$router.push("/administrator");
              }
            }).catch(err => {
                console.log(err)
                this.$messageOK("warning", "用户名或密码有误！");
              });
          }).catch(err=>{
              console.log(err)
            this.$messageOK("warning", "注册失败！");
          })
        },
        getVertifyCode(){
            let requestData = {
              email : this.registerForm.email,
            }
          removeAccessToken();
          removeRole();
          GetVertifyCode(requestData).then(res=>{
            this.$messageOK("success", "验证码发送成功！");
            this.verificationCode = res.data.data
            this.vertifyCodeMessage = "验证"
          }).catch(err => {
            this.$messageOK("warning", "验证码发送失败!");
            console.log(err);
          })
        }
      },
      watch:{
        vertifyCodeMessage:function () {
          this.vertifyCodeMessage = '获取验证码'
        }
      }
    }
</script>

<style lang="scss" scoped>
.register_tab{
  text-align: center;
  li{
    display: inline-block;
    margin: 20px;
  }
  .el-form-font-color{
    color: white;
  }

}
</style>
